<template>
    <div>
        <dv-full-screen-container class="bg" ref="container">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <titleView :titleName="titleName"/>

                <div class="body-box">
                    <!-- 第一行数据 -->
                    <div class="top-box">
                        <dv-border-box-1 :color="defs.constants.dvBorderColor">
                            <topLeft/>
                        </dv-border-box-1>
                    </div>

                    <!-- 第二行数据 -->
                    <div class="bototm-box">
                        <dv-border-box-8 :color="defs.constants.dvBorderColor">
                            <bottomLeft/>
                        </dv-border-box-8>
                        <dv-border-box-12 :color="defs.constants.dvBorderColor">
                            <bottomCenter/>
                        </dv-border-box-12>
                        <dv-border-box-8 :color="defs.constants.dvBorderColor" :reverse="true">
                            <bottomRight/>
                        </dv-border-box-8>
                    </div>
                </div>
            </div>
        </dv-full-screen-container>
    </div>
</template>

<script>
import titleView from "@/components/titleView";
import topLeft from "./topLeft";
import bottomLeft from "./bottomLeft";
import bottomCenter from "./bottomCenter";
import bottomRight from "./bottomRight";

export default {
    data() {
        return {
            titleName: {
                title1: '十五车间生产经营管理平台',
                title2: '生产管理',
                title3: '数据分析',
            },
            loading: true,
        };
    },
    components: {
        titleView,
        topLeft,
        bottomLeft,
        bottomCenter,
        bottomRight
    },
    mounted() {
        this.selfUtils.cancelLoading(this, 700);
    },
    methods: {}
};
</script>

<style lang="scss" scoped>
#index {
    .host-body {
        .body-box {
            //下方区域的布局
            .top-box {
                grid-template-columns: repeat(1, 100%);
            }

            // 底部数据
            .bototm-box {
                grid-template-columns: repeat(3, 33.3%);
            }
        }
    }
}
</style>